<template>
  <li @click="routerChange()" :class="{isActive:isActive}">
    <p class="title"><slot></slot></p>
  </li>
</template>

<script>
export default {
  name: "Item",
  props: {
    activeColor: {
      type: String,
      default: "#0057c2",
    },
    query: {
      type: String,
    },
  },
  methods: {
    routerChange() {
      this.$emit("routerChange");
    },
  },
  computed: {
    isActive() {
      return this.$route.params.sequence == this.query;
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
.sidenavitem2 li {
  margin-left: 15%;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 5px;
  list-style: none;
  transition: all 0.1s;
  flex: 1;
  cursor: pointer;
  @include sidenav-color($color-blackgray-light);
  font-size: .9rem;
  margin-top: 5px;
  transition: all .3s ease;
}
span{
   letter-spacing: 0rem !important;
}
.sidenavitem2 .title{
  line-clamp: 2;
}
.sidenavitem2 li:hover {
  @include sidenav-color-active($bgcolor-gray)
}
.sidenavitem2 li:hover {
  opacity: 0.7;
}
.isActive{
  color:#409EFF !important;
  @include sidenav-color-active($bgcolor-gray)
}

 /* 显示一行，省略号
 
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
 
 显示两行，省略号 
 
 text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical; */
</style>
